import {
  Breadcrumb,
  Button,
  Card,
  Form,
  Input,
  message,
  Modal,
  Radio,
  Space,
  Upload,
} from "antd";
import Channel from "component/Channel";
import { Component, useEffect, useRef, useState } from "react";
import { Link } from "react-router-dom";
import { UploadOutlined } from "@ant-design/icons";
// 富文本
// 1 下包 --force表示忽略警告,强制安装
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import styles from "./index.module.scss";
import { baseURL } from "utils/request";
import { getToken } from "utils/storage";
import { publishArticleAPI, getArticleById, editArticleAPI } from "api/article";
import { useHistory } from "react-router-dom";
import { useParams } from "react-router-dom";

export default function Publish(_props) {
  // const { id } = _props.match.params;
  // 1. 获取ID 🔔
  const params = useParams();
  console.log("params  ----->  ", params);
  const { id } = params;
  console.log("id  ----->  ", id);

  // 2. 声明ref，存入draft的值
  const draftRef = useRef(false);
  /*
  学习目标：知识点补充-history的使用
  作用；完全相同，都是获取history
  步骤：
     1. 👍useHistory: 没有设置过Route组件的，也可以使用useHistory
        1.1 useHistory 任意函数组件中都可以使用
        1.2 它有语法提示
     2. props.history： Route组件设置过匹配路由的，才有props.history
     3  通用utils/history.js  ： 没有限制
*/

  // 1 设置状态
  const [imgUrl, setImgUrl] = useState("");
  // 1. 声明state.type，表示封面的类型
  const [type, setType] = useState(1);
  //  1. 声明state.fileList准备驱动视图
  const [fileList, setFileList] = useState([]);
  // 1. 设置三个关键的属性
  const props = {
    // name 代表的是后台接收的文件类型；
    name: "image",
    //  显示默认支持的文件类型
    accept: ".jpg,.png,.jpeg",
    // action代表上传文件的接口地址
    action: `${baseURL}/v1_0/upload`,
    // 设置token
    headers: {
      authorization: `Bearer ${getToken()}`,
    },
    onChange(info) {
      // 2. onChange时更新fileList
      console.log("info  ----->  ", info);
      setFileList(info.fileList);
      // 2. 提示改成中文
      if (info.file.status === "done") {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} 上传失败`);
      }
    },
    //   预览
    onPreview: (file) => {
      console.log(file);
      //   2 保存 url
      setImgUrl(file.url || file.thumbUrl);
    },
    // 上传前的回调
    beforeUpload: (file, fileList) => {
      const allowFileType = ["image/jpeg", "image/jpg", "image/png"];
      console.log(file);
      if (!allowFileType.includes(file.type)) {
        message.warning("不允许上传的文件类型");
        return Upload.LIST_IGNORE;
      }
    },
  };

  const loadArticleById = async (id) => {
    const res = await getArticleById(id);
    console.log("res  ----->  ", res);

    // 3. 回填表单数据
    // 🔔setFieldsValue() 给表单字段设置值
    const type = res.data.cover.type;
    formRef.current.setFieldsValue({ ...res.data, type });
    // 1. 回填state.type的值
    setType(type);
    // 2. 回填fileList  🔔 string[] 转换为{url: string}[]
    setFileList(res.data.cover.images.map((item) => ({ url: item })));
  };

  //   1. 创建ref
  const formRef = useRef(null);

  // 3. 挂载后，判断，有id就发请求
  useEffect(() => {
    if (id) {
      loadArticleById(id);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 表单值改变的回调
  const handleValuesChange = (changedValues, allValues) => {
    // console.log(changedValues);
    if (changedValues.type !== undefined) {
      setType(changedValues.type);
    }
  };
  // 为了保留图片，不清空数组
  // 1. 定义计算属性showFileList
  const showFileList = fileList.filter((item, index) => {
    // 2. 计算应该显示的结果
    // 如果type为0，返回fasle
    if (type === 0) return false;

    // 如果为1，index为0的返回true
    if (type === 1) return index === 0;

    // 如果为3，返回整个数组
    return true;
  });
  // 3. 显示showFileList

  // 👍快速拿history
  const history = useHistory();

  // 提交表单按钮
  const handleSubmit = async (values) => {
    console.log(values);
    const formData = { ...values };

    // if (type === 0) {
    //   formData.cover = {
    //     type: type,
    //     images: [],
    //   };
    // } else {
    //   formData.cover = {
    //     type: type,
    //     images: showFileList.map((item) => {
    //       return item.response.data.url;
    //     }),
    //   };
    // }
    console.log(showFileList);
    formData.cover = {
      type: type,
      images:
        type === 0
          ? []
          : showFileList.map((item) => item.url || item.response.data.url),
    };
    delete formData.type;

    console.log("formData  ----->  ", formData);

    //  🔔 点击存草稿时，主动传true
    // 4. 取出draft的值，传值

    // 2. 判断数量，提示用户
    if (fileList.length < type) {
      message.warning("图片数量不对");
      return;
    }

    if (id) {
      // 🔔 记得传id回去
      await editArticleAPI({ id, ...formData }, draftRef.current);
      message.success("编辑成功", 1);
    } else {
      await publishArticleAPI(formData, draftRef.current);
      message.success("发布成功", 1);
    }
    // 跳转页面
    history.push("/list");
  };

  return (
    <div style={{ paddingTop: 24 }} className={styles.root}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>{id ? "编辑" : "发布"}文章</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        {/* 表单 */}
        <Form
          // 2. 绑定给Form组件
          ref={formRef}
          onValuesChange={handleValuesChange}
          size="large"
          name="basic"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 20,
          }}
          autoComplete="off"
          onFinish={handleSubmit}
          // 💥 富文本设置了name属性要配合初始值
          initialValues={{
            content: "",
            // 1. 默认值
            type: 1,
          }}
        >
          <Form.Item
            rules={[
              {
                required: true,
                message: "标题不能为空",
              },
            ]}
            name="title"
            label="标题"
          >
            <Input />
          </Form.Item>
          <Form.Item
            rules={[
              {
                required: true,
                message: "请选择频道",
              },
            ]}
            name="channel_id"
            label="频道"
          >
            <Channel style={{ width: 200 }}></Channel>
          </Form.Item>
          <Form.Item
            rules={[
              {
                validator: (_, value) => {
                  if (!value || value === "<p><br></p>") {
                    return Promise.reject(new Error("内容不能为空"));
                  }
                  return Promise.resolve();
                },
                message: "内容不能为空",
              },
            ]}
            label="内容"
            name="content"
          >
            {/* 3. 受控组件  💥FormItem会自动控制ReactQill为受控组件 */}
            <ReactQuill></ReactQuill>
          </Form.Item>

          <Form.Item label="封面" name="type">
            <Radio.Group>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>

          {/* JSX迁移 */}
          <Form.Item wrapperCol={{ offset: 4 }}>
            {/* 🔔记得把fileList设置给Upload组件 ,fileList类似Input的value属性，控制它的值*/}
            <Upload {...props} listType="picture-card" fileList={showFileList}>
              {fileList.length < type && (
                <Button icon={<UploadOutlined />}></Button>
              )}
            </Upload>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 4,
            }}
          >
            <Space>
              <Button type="primary" htmlType="submit">
                {id ? "编辑" : "发布"}文章
              </Button>

              {/* 3. 🔔点击时修改drarfRef的值为true */}
              <Button
                type="primary"
                htmlType="submit"
                onClick={() => (draftRef.current = true)}
              >
                存草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      {/* 对话框 */}
      <Modal
        footer={null}
        visible={!!imgUrl}
        onOk={() => {
          setImgUrl("");
        }}
        onCancel={() => {
          setImgUrl("");
        }}
      >
        <img width={400} src={imgUrl} alt="" />
      </Modal>
    </div>
  );
}
